import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import {
  EditableProTable,
  ProCard,
  ProFormField,
  ProFormRadio,
} from '@ant-design/pro-components';
import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Row,
  Col,
  Popconfirm,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
import AddTagCom from './addTag';



const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  const addTagRef = useRef();
  // const [fileList,setfileList] = useState([]);
  const [code, setCode] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [list, setlist] = useState([]);
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    setlist([]);
    props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    form
      .validateFields()
      .then((vals) => {
        let Obj = form.getFieldsValue();
        Obj = {
          ...Obj,
        };

        const url = code ? '/api/dataEncyclopedia/apis/update' : '/api/dataEncyclopedia/apis/create';
        if (code) {
          Obj.id = code;
        }

        request(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          data: Obj,
        }).then((res) => {
          message.success(res?.meta?.msg);
          setIsModalVisible(false);
          handleCancel();
        });
      })
      .catch((info) => { });
  };

  const getDetail = (id?: any) => {
    request('/api/dataEncyclopedia/apiTag/list', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        apiID: id || code,
        pageNum: 1, pageSize: 10000
      },
    }).then((res) => {
      let data = res?.data?.list || []
      setlist(data);
      showModal();
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any) => {

      if (id) {
        setCode(id);
        getDetail(id);
      } else {
        showModal();
      }

      // setfileList([]);
    },
  }));
  const deleteTag = (id: any) => {
    request('/api/dataEncyclopedia/apiTag/delete/' + id, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {

      },
    }).then((res) => {
      getDetail()
    });
  }
  return (
    <Modal
      title={'api标签管理'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1800}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
      footer={
        <Button onClick={handleCancel}></Button>
      }
    >
      <Form form={form}>
        <Form.Item label="已添加标签">
          {
            list.map((e: any, i) => {
              return <div className='tags_define'>
                <span>{e.tagName}</span>
                <Popconfirm
                  title="确认删除？"
                  description=""
                  onConfirm={() => deleteTag(e.id)}
                  okText="确认"
                  key={i}
                  cancelText="取消"
                >
                  <CloseOutlined />
                </Popconfirm>
              </div>







              // <Tag key={i} closable >
              //   {e.tagName}
              // </Tag>
            })
          }
        </Form.Item>
        <Form.Item label=''>
          <Button onClick={() => { addTagRef.current.init(code) }}>新增标签</Button>
        </Form.Item>
      </Form>
      <AddTagCom
        ref={addTagRef}
        callback={() => {
          getDetail()
        }}
      />
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
